<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../layout/base/base.css">
    <link rel="stylesheet" href="../../../../src/css/common/reset.css">
    <link rel="stylesheet" href="com-select-floor.css">
    <link rel="stylesheet" href="../check/com-check.css">
    <script src="../../lib/jquery.js"></script>
    <script src="com-select-floor.js"></script>
    <style>
        .demo{

            width:300px;
            min-height: 400px;
            margin:0 auto;
            padding:10px;
            border: 1px solid #ebebeb;
        }
    </style>
    <script>
        var options = [
            {
                value: 'zhinan',
                label: '指南',
                children: [
                    {
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [
                            {
                                value: 'yizhi',
                                label: '一致'
                            },
                            {
                                value: 'fankui',
                                label: '反馈'
                            },
                            {
                                value: 'xiaolv',
                                label: '效率'
                            },
                            {
                                value: 'kekong',
                                label: '可控'
                            }
                        ]
                    },
                    {
                        value: 'daohang',
                        label: '导航',
                        children: [
                            {
                                value: 'cexiangdaohang',
                                label: '侧向导航'
                            },
                            {
                                value: 'dingbudaohang',
                                label: '顶部导航'
                            }
                        ]
                    }
                ]
            },
            {
                value: 'zujian',
                label: '组件',
                children: [
                    {
                        value: 'basic',
                        label: 'Basic',
                        children: [
                            {
                                value: 'layout',
                                label: 'Layout 布局'
                            },
                            {
                                value: 'color',
                                label: 'Color 色彩'
                            },
                            {
                                value: 'typography',
                                label: 'Typography 字体'
                            },
                            {
                                value: 'icon',
                                label: 'Icon 图标'
                            },
                            {
                                value: 'button',
                                label: 'Button 按钮'
                            }
                        ]
                    },
                    {
                        value: 'others',
                        label: 'Others',
                        children: [
                            {
                                value: 'dialog',
                                label: 'Dialog 对话框'
                            },
                            {
                                value: 'tooltip',
                                label: 'Tooltip 文字提示'
                            },
                            {
                                value: 'popover',
                                label: 'Popover 弹出框'
                            },
                            {
                                value: 'card',
                                label: 'Card 卡片'
                            },
                            {
                                value: 'carousel',
                                label: 'Carousel 走马灯'
                            },
                            {
                                value: 'collapse',
                                label: 'Collapse 折叠面板'
                            }
                        ]
                    }
                ]
            },
            {
                value: 'ziyuan',
                label: '资源',
                children: [
                    {
                        value: 'axure',
                        label: 'Axure Components',
                        children:[
                            {
                                value:'lalla',
                                label:'nihao',
                                children:[
                                    {
                                        value:'789',
                                        label:'fdsfsdfdsf'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    },
                    {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }
                ]
            }
        ]
    </script>
</head>
<body>

<div class="feat-grid feat-reset demo clearfix">

    <section class="com-select-floor">
        <div class="sel-item">
            <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
            <input type="hidden" value="">
            <i class="sel-icon"></i>
        </div>
        <div class="sel-box">
            <ul class="sel-content">
                <li data-val="1" class="sel-list">1a</li>
                <li data-val="2" class="sel-list">2a1</li>
                <li data-val="3" class="sel-list">3a</li>
            </ul>
        </div>
    </section>
</div>


<script>

    $('.com-select-floor').comSelectFloor({
        data:options,
        multi:true,
        expandTrigger:'click',
        check:true,
        callback:function(val,text){
            console.log(val)
        }
    });

    //更改原因字段
    function filterReason(reasonArr){
        var arr = [];
        $.each(reasonArr,function(index,item){
            var obj = {
                label:item.Name,
                value:item.Id,
                children:[]
            }
            if(item.ChildProblemData && item.ChildProblemData.length>=1){
                obj.children = filterReason(item.ChildProblemData)
            }
            arr.push(obj);
        });
        return arr;
    }
</script>
</body>
</html>